<template>
	<view class="update-alipay-box">
		<view class="update-item">
			<u-input placeholder="请输入新手机号码" type="number" :custom-style="inputStyle" height="100" v-model="updatePhoneDate.mobile" :clearable="false" />
		</view>
		<view class="u-m-t-60">
			<!-- 使用确定按钮组件 -->
			<define-button @click="buttonClick"></define-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 手机号信息对象
				updatePhoneDate: {
					// 新手机号
					mobile: '',
					type: 1,
				},
				inputStyle: {
					fontSize: '36rpx',
					fontFamily: 'PingFang SC',
					fontWeight: 500,
					color: '#97979F',
				}
			};
		},
		onLoad(options) {
			this.updatePhoneDate.mobile = options.phone || ''
			if(this.updatePhoneDate.mobile) {
				uni.setNavigationBarTitle({
					title: '编辑手机号'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '添加手机号'
				})
			}
		},
		methods: {
			// 确定按钮的点击事件
			async buttonClick(value) {
				// 简单校验输入框区域不能为空
				if(!this.updatePhoneDate.mobile) return this.$u.toast('请先输入您的新手机号')
				if(!this.$u.utils.isPhone(this.updatePhoneDate.mobile)) return this.$u.toast('手机号格式错误')
				// TODO:后续的修改或提交保存逻辑
				const res = await this.$u.api.editProfileDatas(this.updatePhoneDate)
				if(!res) return
				this.$u.route({
					type: 'back'
				})
				this.$u.toast('编辑手机号成功')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.update-alipay-box {
		height: 100vh;
		background-color: #F4F6FA;
		padding-top: 20rpx;
		.update-item {
			height: 100rpx;
			background-color: white;
			border-bottom: 1rpx solid #E7EAF0;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #141418;
			padding: 0 25rpx;
		}
	}
</style>
